<template>
  <div ref="ref" class="regist">
    <!-- 注册框 -->
    <div class="f">
      <h3>注册</h3>
      <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名：" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="pwd" label-width="70px">
          <el-input v-model="form.pwd"></el-input>
        </el-form-item>
        <el-button @click="submit">去登录</el-button>
        <el-button @click="regist">注册</el-button>
      </el-form>
    </div>
    <!-- 画布 -->
    <canvas ref="regist" id="regist" :width="w" :height="h"></canvas>
  </div>
</template>
<script>
import { createScene4 } from "../../scenes/MyScene2/MyScene2";
export default {
  data() {
    return {
      w: 0,
      h: 0,
      form: {},
      rules: {
        name: [{ required: true, message: "用户名必填", trigger: "blur" }],
        pwd: [{ required: true, message: "密码必填", trigger: "blur" }],
      },
    };
  },
  async mounted() {
    this.h = this.$refs.ref.clientHeight;
    this.w = this.$refs.ref.clientWidth;
    if (this.$refs.regist) {
      await createScene4(this.$refs.regist);
    }
  },
  methods: {
    //登录跳转
    submit() {
      this.$router.push("/index");
    },
    // 注册功能
    regist() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        alert("成功");
        this.form = {};
      });
    },
  },
};
</script>
<style  scoped>
.f {
  opacity: 0.5;
  text-align: center;
  width: 300px;
  height: 300px;
  background-color: pink;
  z-index: 99999;
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
}
.el-form {
  margin-top: 50px;
}
.el-input {
  width: 200px;
}
.regist {
  width: 100vw;
  height: 100vh;
  position: relative;
}
#regist {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
<style >
* {
  margin: 0;
  padding: 0;
}
</style>